import React, { useCallback, useContext } from 'react'
import { useRouteMatch, useHistory, NavLink } from 'react-router-dom'
import { pathContext } from './PathContext'

export default function MyNavLink(props) {
  const { path, title } = props.route
  const { state, dispatch } = useContext(pathContext)

  // match 实现获取当前路径是否匹配的逻辑
  // match: null-未匹配 obj-匹配的对象
  // const match = useRouteMatch({
  //   path,
  //   exact: true
  // })

  // 路由对象，包含路由跳转等方法
  const history = useHistory()

  // const handleTabClick = useCallback(
  //   () => {
  //     // 4、路由切换
  //     history.push(path)
  
  //     // props.onChangePath && props.onChangePath(path)
  //     dispatch({
  //       type: 'changePath',
  //       path
  //     })
  //   },
  //   []
  // )

  return (
    <li>
      <NavLink activeClassName="active" to={path}>{title}</NavLink>
    </li>
  )
}
